<template>
  <nav>
    <div class="innernav clear">
      <!-- LOGO s-->
      <div class="logo_box fl">
        <router-link to="/">
          <img src="@/assets/img/logobox/M.png" />
          <a-icon type="home" />
        </router-link>
      </div>
      <!-- LOGO E -->

      <!-- NAV s   -->
      <ul class="headerMenu fl">
        <li class="MenuItem"><a href="#lips">口红 Lips</a></li>
        <li class="MenuItem"><a href="#makeup">底妆 Foundation</a></li>
        <li class="MenuItem"><a href="#Primer">妆前乳 Primer</a></li>
        <li class="MenuItem"><a href="#Perfume">香水 Perfume</a></li>
      </ul>
      <!-- NAVE -->

      <!-- 搜索S -->
      <div class="searchbox fr">
        <a-icon type="search" />
        <input type="text" />
      </div>
      <!-- 搜索E -->
    </div>
  </nav>
</template>

<script>
// import { NavColourmakeup, ProductSeries, Skincare } from "@/api/Goods";
export default {
  data() {
    return {
      NavColourList: [],
      NavProductSeries: [],
      SkincareList: [],
      Navindex: "",
    };
  },
  methods: {
    // enter(index) {
    //   this.Navindex = index;
    // },
    // leave() {
    //   this.Navindex = 999;
    // },

    // 对象排序
    sortData(property) {
      return function (a, b) {
        let value1 = a[property];
        let value2 = b[property];
        return value1 - value2;
      };
    },
  },
  // created: function () {
  //   NavColourmakeup().then((res) => {
  //     this.NavColourList = res.data.result.rows;
  //     this.NavColourList.sort(this.sortData("id"));
  //   });
  //   ProductSeries().then((res) => {
  //     this.NavProductSeries = res.data.result.rows;
  //     this.NavProductSeries.sort(this.sortData("id"));
  //   });
  //   Skincare().then((res) => {
  //     this.SkincareList = res.data.result.rows;
  //     this.SkincareList.sort(this.sortData("id"));
  //   });
  // },
  computed: {},
};
</script>


<style lang="scss" scoped>
nav {
  position: relative;
  z-index: 2;
  min-width: 1200px;
  height: 42px;
  line-height: 42px;
  padding: 18px 0 15px 0;
  box-sizing: content-box;
  border-bottom: 1px solid $color;
  background-color: black;
  .innernav {
    width: 1200px;
    margin: 0 auto;
    .logo_box {
      cursor: pointer;
      background-color: black;
      overflow: hidden;
      border: 1px solid white;
      a {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        position: relative;
        img {
          width: 45px;
          height: 45px;
          transition: transform 0.3s;
        }
        .anticon {
          font-size: 28px;
          color: #fff;
          margin-left: -80px;
          transition: transform 0.3s linear;
        }
        &:hover .anticon {
          transform: translate(42px);
          transition: transform 0.3s linear;
        }
        &:hover img {
          transform: translate(45px);
          transition: transform 0.3s linear;
        }
      }
    }
    ul {
      margin-left: 10px;
      .MenuItem {
        float: left;
        padding: 0 10px;
        font-weight: bolder;
        font-size: 14px;
        a {
          color: white;
          &:hover {
            color: $color;
          }
        }
      }
    }
    .searchbox {
      cursor: pointer;
      display: flex;
      align-content: center;
      justify-content: space-around;
      width: 240px;
      height: 30px;
      border-radius: 15px;
      background-color: #f0f0f0;
      position: relative;
      border: 1px solid #f0f0f0;
      margin-top: 5px;
      &:hover {
        opacity: 0.8;
        border-color: #999;
      }
      input {
        width: 200px;
        border: none;
        outline: none;
        margin-right: 10px;
        background-color: #f0f0f0;
      }
      .anticon {
        position: absolute;
        top: 20%;
        bottom: 0;
        right: 2%;
        font-size: 18px;
      }
    }
  }
}
</style>